<template>
  <div>
    <div class="box">
      <div class="box-body">
        <el-row :gutter="20">
          <el-form :model="query" label-position="top">
            <el-col :span="6">
              <el-form-item label="全文检索:">
                <el-input v-model="query.keyword" placeholder="卡号/卡主/银行/类型"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="状态:">
                <el-select v-model="query.status" clearable placeholder="选择信用卡状态">
                  <el-option v-for="(value, key) in CreditCardStatus" :key="key" 
                    :label="value" :value="key" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="" class="no-top-label">
                <el-button type="primary" icon="search" @click="loadPage(1)">检索</el-button>
                <router-link to="/credit-card/add">
                   <el-button type="success" icon="plus">新增</el-button>
                </router-link>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
    </div>

    <el-table :data="page.content" v-loading.body="loading" border>
      <el-table-column prop="cardNo" label="卡号" width="170" />
      <el-table-column prop="bank" label="银行" width="100" />
      <el-table-column prop="owner" label="卡主" width="140"/>
      <el-table-column label="类型" width="120">
        <template slot-scope="scope">
           {{CreditCardType[scope.row.cardType.toString()]}}
        </template>
      </el-table-column>
      <el-table-column label="总额度/可用额度" width="200" >
        <template slot-scope="scope">
          <el-tag>{{Currency[scope.row.currency]}}</el-tag> {{ scope.row.creditLine/100 }}/{{ scope.row.balance/100 }}
        </template>
      </el-table-column>
      <el-table-column label="优先" width="80" >
        <template slot-scope="scope">
          {{ Priority[scope.row.priority]}}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="80" align="center">
        <template slot-scope="scope">
          <el-tag :type="['', 'success', 'danger', '', 'warning'][scope.row.status]">
            {{CreditCardStatus[scope.row.status]}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
          <el-upload :action="apiBaseUrl + '/admin/credit-card/bill/import'" :multiple="false" 
            :show-file-list="false" style="display:inline;" :on-progress="onProgress"
            :on-success="onImportSuccess" :headers="headers" :data="{creditCardId: scope.row.id}">
            <el-button size="small" :loading="uploading">导入</el-button>
          </el-upload>
        </template>
      </el-table-column>
    </el-table>

    <!-- pagination -->
    <el-pagination @current-change="showPage" :current-page.sync="page.page" 
      :page-size="page.pageSize" :total="page.totalElements" 
      layout="total, prev, pager, next, jumper" />
  </div>
</template>

<script>
import Env from '@/env'
import { CreditCard, Header } from '@/store/api'
import Pagination from '@/utils/pagination'
import * as Constants from '@/constants'

export default {
  data() {
    return {
      ...Constants,
      apiBaseUrl: Env.apiBaseUrl,
      headers: Header.authToken(),
      loading: true,
      uploading: false,
      query: {
        status: '',
        pageSize: 20
      },
      page: {
        content: []
      }
    }
  },
  created() {
    this.loadPage(1)
  },
  methods: {
    ...Pagination,
    list(page, query) {
      this.loading = true
      return CreditCard.list(query).then((data) => {
        this.page = data
        this.loading = false
      })
    },
    edit(creditCard) {
      this.$router.push('/credit-card/' + creditCard.id + '/edit/')
    },
    onProgress() {
      this.uploading = true
    },
    onImportSuccess(response, file) {
      this.uploading = false
      if (response && response.code && response.code === 200) {
        this.$message.success('导入成功')
      } else {
        this.$message.error('导入失败，请查看日志')
      }
    }
  }
}
</script>
